<template>
  <div class="login_container">
    <loginAndRegisterPage>
      <div class="right-content">
        <h2 class="title">
          <span class="">帐号登录</span>
        </h2>
        <div class="nav">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
            <el-menu-item index="1" style="font-size:22px;">账号登录</el-menu-item>
            <el-menu-item index="2" style="font-size:22px;" @click="message">手机短信登录</el-menu-item>
            <el-menu-item index="3" style="font-size:22px;" @click="message">微信登录</el-menu-item>
          </el-menu>
        </div>
        <el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
          <el-form-item prop="account" style="margin-top: 10px;"><el-input placeholder="请输入账号"
                                                                           v-model="loginForm.account"></el-input></el-form-item>
          <el-form-item prop="password"><el-input placeholder="请输入密码" type="password"
                                                  v-model="loginForm.password"></el-input></el-form-item>
        </el-form>
        <div class="flex-between">
          <el-checkbox label="下次自动登录" class="footer" ></el-checkbox>
          <span>忘记密码?</span>
        </div>
        <div class="login">
          <el-button type="primary" class="loginButton" @click="login">登录</el-button>
        </div>
        <div class="register">
          <span>还没有账号?</span>
          <span class="registerButton" @click="register">去注册</span>
        </div>
      </div>
    </loginAndRegisterPage>
  </div>
</template>

<script>
import LoginAndRegisterPage from '../../components/Login.vue'
import { Encrypt } from "@/utils/decrypt.js";
import { Message } from "element-ui";
import { postRequest} from "@/utils/api";

export default {
  name: 'loginPage',
  data() {
    return {
      activeIndex: '1',
      //登录表单的数据绑定对象
      loginForm: {
        account: '',
        password: ''
      },
      //登录表单验证规则
      loginFormRules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login() {
      let submitForm ={
        account : this.loginForm.account,
        password : this.loginForm.password
      }
      //验证
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return;
        let data = { ...this.loginForm };
        data.password = Encrypt(data.password);//加密密码
        console.log(data)
        const res = postRequest('/user/login',submitForm).then(res => {
              console.log(res)
          if (res.data.code === 200) {
            res.data.data.password = "*********"
            localStorage.setItem('loginStatus','1')
            localStorage.setItem('Token',JSON.stringify(res.data.data.token))
            localStorage.setItem('UserInfo',JSON.stringify(res.data.data))
            console.log(localStorage.getItem('Token'))
            this.$router.push('/')
          }
      }
      )
        console.log(res);
      })

    },
    //注册
    register() {
      this.$router.push('/register')
    },
    message() {
      Message({ message: "功能未实现哦，还是账户登录，请见谅~" });
    }
  },
  components: {
    LoginAndRegisterPage
  }
}

</script>
<style scoped>
.login_container {
  background-color: #f8f9fa;
  height: 100%;
}

.right-content {
  width: 431px;
  height: 500px;
  padding: 0 35px;
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 0 0 61px 0 rgb(85 108 144 / 7%);
}

.title {
  text-align: center;
  padding: 18px 0;
  position: relative;
  font-size: 28px;
}

.nav {
  margin-top: -20px;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
  font-size: 14px;
  font-family: 'Roboto,Helvetica,Arial,sans-serif ';
  color: #606266;
}

.login {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.loginButton {
  width: 450px;
  height: 50px;

}

.register {
  display: flex;
  float: right;
  margin-top: 24px;
  font-size: 14px;
  font-family: 'Roboto,Helvetica,Arial,sans-serif ';
  color: #606266;
}

.registerButton {
  font-size: 14px;
  font-family: 'Roboto,Helvetica,Arial,sans-serif ';
  color: #4285f4;
  cursor: pointer;
}

.footer {
  font-size: 14px;
  font-family: 'Roboto,Helvetica,Arial,sans-serif ';
  color: #606266;
}
</style>
